<template>
	<view class="product">
		<view class="table-head flex flai">
			<view class="flex flai" style="width: 104rpx;">
				<text>日期</text>
				<view class="sort">
					<view class="up-btn" @click="dateSort(2,'asc')" v-if="dateDesc==1">
						<image src="../../../static/img/sortDown.png"></image>
					</view>
					<view class="up-btn" @click="dateSort(1,'desc')" wx:else>
						<image src="../../../static/img/sortUp.png"></image>
					</view>


				</view>
			</view>
			<view style="width: 422rpx;">产品</view>
			<view class="flex flai" style="width: 104rpx;">
				<text>报价</text>
				<view class="sort">
					<view class="up-btn" @click="priceSort(2,'asc')" v-if="priceDesc==1">
						<image src="../../../static/img/sortDown.png" mode=""></image>
					</view>
					<view class="up-btn" @click="priceSort(1,'desc')" wx:else>
						<image src="../../../static/img/sortUp.png" mode=""></image>
					</view>
				</view>
			</view>
			<view style="width: 70rpx;text-align: right;margin-left: 20rpx;">操作</view>
		</view>
		<view class="body-box" v-if="list.length>0">


			<view class="table-body">
				<view style="height:35rpx"></view>
				<scroll-view :style="{height:productListHeight+'px'}" scroll-y="true" class="scroll-Y" :refresher-enabled="'true'"
				 refresher-triggered="true" @scrolltolower="upper" @refresherrefresh="refresh">
					<view class="body flex flai" v-for="(item,index) in list" :key="index">
						<view class="date">{{item.updateTime}}</view>
						<view style="width: 350rpx;margin-right:20rpx;margin-left:20rpx;">
							<view class="product-name">{{item.name}}</view>
							<view class="address flex flai" v-if="isNeedShow" @click="toMechartDetail(item.merchantId)">
								<image src="../../../static/img/ding02.png"></image>
								<text>{{item.marketName}}{{item.storeLocation}}({{item.merchantName}})</text>
							</view>
						</view>
						<view class="price" style="width: 120rpx;text-align: left;marign-right:15px;">￥{{item.retailPrice}}</view>
						<view style="width: 70rpx;text-align: center;" @click="add(item)">
							<image src="../../../static/img/sub.png" class="sub"></image>
						</view>

					</view>
					<view class="loading flex flai fljc" v-if="loading">

						<text>{{msg}}</text>
					</view>
				</scroll-view>


			</view>
		</view>
		<view class="no-data" v-else :style="{height:productListHeight-160+'px','line-height':productListHeight-160+'px'}">
			暂无数据
		</view>

		<vant-popup :show="mask" position="bottom" custom-style="width: 100%;height:33%">
			<view class="popu">
				<view class="popu-head">
					<text>操作</text>
					<view class="cancel" @click="cancel">取消</view>
				</view>
				<view class="popu-body flex fljcsb">
					<view class="image" @click="copyWx(info.wechatName)">
						<image src="../../../static/img/wcIcon.png"></image>
						<text>微信号</text>
					</view>
					<view class="image" @click="call(info.contactPhone)">
						<image src="../../../static/img/telIcon.png"></image>
						<text>呼叫</text>
					</view>
					<view class="image" @click="joinCar(item)">
						<image src="../../../static/img/carIcon.png"></image>
						<text>添加购物车</text>
					</view>


				</view>
			</view>
		</vant-popup>
	</view>
</template>

<script>
	import API from '../../../api/index.js'
	export default {
		props: {
			list: {
				type: Array,
				default: function() {
					return []
				}
			},
			packId: {
				type: String,
				default: ""
			},
			type: {
				type: String,
				default: ""
			},
			productListHeight: {
				type: Number,
				default: 300
			},
			isNeedShow: {
				type: Boolean,
				default: false
			},
			loading: {
				type: Boolean,
				default: false
			},
			msg: {
				type: String,
				default: ""
			},

		},
		data() {
			return {
				mask: false,
				dateDesc: 2, //日期
				priceDesc: 2, //价格
				info: {}
			}
		},
		methods: {
			upper() {
				console.log('滚动到底部')
				this.$emit('loadMore')
			},
			refresh() {
				console.log('下拉耍新')
				this.$emit('refresh')
			},
			toMechartDetail(id) {
				uni.navigateTo({
					url: "/pages/mechartDetail/mechartDetail?id=" + id
				})
			},
			// 日期排序
			dateSort(index, type) {
				this.dateDesc = index
				this.$emit('update', type)
			},
			priceSort(index, type) {
				this.priceDesc = index
				this.$emit('upPrice', type)
			},
			// 隐藏弹框
			cancel() {
				this.mask = false
			},
			// 显示弹框
			add(info) {
				this.mask = true
				this.info = info
			},
			// 复制微信
			copyWx(wx) {
				uni.setClipboardData({
					data: wx,
					success: function() {
						uni.showToast({
							title: '复制成功',
							duration: 2000
						});
					}
				});
			},

			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			},
			// 加入购物车
			joinCar() {

				var data = {
					packId: this.packId,
					goodsId: this.info.id,
					type: this.type
				}
				API.indexHome.joinCar(data).then(res => {
					if (res.errno == '0') {
						uni.showToast({
							title: '加入成功',
							duration: 2000
						});
						if (res.data.packId && res.data.packId != '') {
							uni.setStorageSync('packId', res.data.packId)
						}
						if (this.type == 'add') {
							this.type = ''
							this.packId = res.data.packId
						}

						this.mask = false
					}
				})

			}
		}
	}
</script>
<style>
	.no-data {
		text-align: center;
		color: #666;
		font-size: 30rpx;


	}

	.table-head {
		width: 702rpx;
		height: 80rpx;
		background: #222222;
		opacity: 1;
		border-radius: 20rpx 20rpx 0px 0px;
		color: #fff;
		font-size: 28rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		text-align: center;
	}

	.sort image {
		width: 14rpx;
		height: 18rpx;
		margin-left: 16rpx;
	}

	.up-btn {
		width: 30rpx;
	}

	.table-body {
		min-height: 400rpx;
		background-color: #fff;
		border-radius: 0px 0px 20rpx 20rpx;
		padding-bottom: 20rpx;
		max-height: 900rpx;
		overflow-y: auto;

	}

	.body-box {
		padding-bottom: 40rpx;
		border-radius: 0px 0px 20rpx 20rpx;
		background-color: #fff;
	}

	.sub {
		width: 40rpx;
		height: 40rpx;
	}

	.product-name {
		margin-bottom: 10rpx;
	}

	.product-name,
	.date {
		font-size: 28rpx;
	}

	.date {
		width: 80rpx;
		padding: 0 15rpx;
	}

	.price {
		font-size: 28rpx;
		color: #FF4076;
	}

	.address image {
		width: 28rpx;
		height: 28rpx;
		margin-right: 10rpx;
	}

	.address text {
		font-size: 28rpx;
	}

	.body {
		margin-bottom: 24rpx;
		border-bottom: 1px solid #F8F8F8;
		padding-bottom: 24rpx;
	}

	.body:last-of-type {
		border-bottom: 0;
	}

	.popu {
		width: 100%;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 20rpx 20rpx 0px 0px;
	}




	.popu-head {
		line-height: 88rpx;
		text-align: center;
		font-size: 32rpx;
		position: relative;
	}

	.popu-head .cancel {
		font-size: 28rpx;
		color: #999999;
		position: absolute;
		right: 20rpx;
		top: 0rpx;
		width: 80rpx;
		text-align: center;
	}

	.popu-head .cancel:active {
		background-color: #F8F8F8;

	}

	.popu-body {
		width: 584rpx;
		margin: 60rpx auto 20rpx auto
	}

	.popu-body .image {
		width: 140rpx;
		margin-right: 46rpx;
		text-align: center;

	}

	.popu-body .image image {
		width: 100rpx;
		height: 100rpx;
		display: block;
		margin: 0 auto 25rpx auto;
	}

	.popu-body .image:nth-child(3) {
		margin-right: 0;
	}

	.popu-body .image text {
		font-size: 28rpx;
		color: #666666;
		display: block;
	}
</style>
